#app {}

div {
  padding: 30px;
  font-size: 18px;
  color: #eee;
}

/**
    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
    要实现这一点，必须规定两项内容：
    指定要添加效果的CSS属性
    指定效果的持续时间。



    transition	简写属性，用于在一个属性中设置四个过渡属性。	
    transition-property	规定应用过渡的 CSS 属性的名称。	
    transition-duration	定义过渡效果花费的时间。默认是 0。	
    transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	
    transition-delay	规定过渡效果何时开始。默认是 0。
**/
/* 动画 */
.transition-box {
  width:100px;
	height:100px;
	background:red;
	transition:width 2s ease-in-out 2s;
}
div:hover
{
	width:300px;
}